<template>
    <el-container class="IevementsBox">
        <el-main class="mainBox">
            <div class="IevementsContent">
            
                <div class="title">
                    <label>教研成果</label>
                </div>

                <ul class="IevementsWarp">
                    <li class="IevementsList" v-for="(item,index) in researchGainlist.list" :key="index"
                    @click="toResearchReadDetails(item,2)">
                        <div class="heading">
                            <i class="el-icon-caret-right"></i>
                            <label>{{item.title}}</label>
                        </div>
                        <div class="time">
                            <label>{{item.creationtime}}</label>
                        </div>
                    </li>
                </ul>

                <div class="block">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="page" :page-sizes="[8, 12, 16, 20]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>

            </div>
        </el-main>
        <el-aside class="rightBox">
            <div class="IevementsContent">
                <div class="title">
                    <label>热门成果</label>
                </div>
                <ul class="hotWarp">
                    <li class="hotList" v-for="(item,index) in researchGainlistHotP.list" :key="index"
                    @click="toResearchReadDetails(item,2)">
                        <div class="user">
                            <span>{{index+1}}</span>
                            <label>{{item.title}}</label>
                        </div>
                    </li>
                </ul>
            </div>
        </el-aside>
    </el-container>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        computed:{
            ...mapState({
                userInfo: state => state.userModule.userInfo,
                otherUserInfo: state => state.userModule.otherUserInfo,
            })
        },
        created(){
            // this.researchGain()
        },
        mounted(){
            this.researchGain()
            this.researchGainlistHot()
        },
        data() {
            return {
                researchGainlist: {},
                researchGainlistHotP: {},
                page: 1,
                pageSize: 8,
                total: 0
            }
        },
        methods: {
            toResearchReadDetails(params,type){
                if (this.userInfo.id && this.otherUserInfo.userid && 
                this.userInfo.id != this.otherUserInfo.userid) {
                    this.$store.dispatch('visitorAllModule/visitorAdd', {
                        fromuserid: this.otherUserInfo.userid,
                        visitorid:  params.id,
                        type: type == 3?6:2
                    })
                }
                this.$router.push({path:'/research/researchOther/researchReadDetails',query:{
                    article: params,
                    junmpType: type}})
            },
            researchGain(){
                this.$store.dispatch('articleModule/schoolArticleList',{
                    schoolid: this.otherUserInfo.xxdm,
                    classifyid: null,
                    dictype: '94',
                    draft: 1,
                    limit: this.pageSize,
                    page: this.page,
                    search: null,
                    sortType: 0,
                    userid: null,
                    yearandmonth: null
                }).then(res =>{
                    if(res.data.code == 200){
                        this.total = res.data.result.total
                        this.researchGainlist = res.data.result
                    }
                })
            },
            researchGainlistHot(){
                this.$store.dispatch('researchModule/hotAchievement',{
                    schoolid: this.otherUserInfo.xxdm,
                    dictype: '94',
                }).then(res =>{
                    if(res){
                        this.researchGainlistHotP = res
                    }
                })
            },
            // 每页显示条数
            handleSizeChange(val) {
                this.pageSize = val
                this.researchGain()
            },

            // 当前页
            handleCurrentChange(val) {
                this.page = val
                this.researchGain()
            }
        },
    }
</script>

<style lang="scss" scoped>
    .IevementsBox {
        width: 81%;
        margin: 0 auto;

        .title {
            font-size: 14px;
            color: #303133;
            text-align: left;
            box-sizing: border-box;
            padding-bottom: 8px;
            border-bottom: 2px solid #409EFF;

        }

        .IevementsContent {
            background-color: white;
            box-sizing: border-box;
            padding: 10px;
            width: 100%;
            height: 100%;
        }

        .mainBox {
            padding-left: 0;

            .IevementsWarp {
                list-style-type: none;
                margin-block-start: 0;
                margin-block-end: 0;
                padding-inline-start: 0;
                margin-top: 10px;

                .IevementsList {
                    height: 40px;
                    line-height: 40px;
                    font-size: 14px;
                    color: #303133;

                    .heading {
                        float: left;
                        text-align: left;
                        max-width: 70%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        cursor: pointer;

                        i {
                            color: #409EFF;
                            font-size: 18px;
                        }

                        label {
                            cursor: pointer;
                        }
                    }

                    .heading:hover>label {
                        color: #409EFF;
                    }

                    .time {
                        float: right;
                        color: #909399;
                    }
                }
            }

            .block {
                margin-top: 20px;
            }
        }

        .rightBox {
            padding: 20px 0;

            .hotWarp {
                list-style-type: none;
                margin-block-start: 0;
                margin-block-end: 0;
                padding-inline-start: 0;
                margin-top: 10px;

                .hotList {
                    height: 40px;
                    line-height: 40px;

                    .user {
                        color: #303133;
                        font-size: 14px;
                        width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        text-align: left;
                        cursor: pointer;

                        span {
                            display: inline-block;
                            width: 20px;
                            height: 20px;
                            line-height: 20px;
                            color: white;
                            text-align: center;
                            background-color: #909399;
                            margin-right: 6px;
                        }

                        label {
                            cursor: pointer;
                        }
                    }

                    .user:hover>label {
                        color: #409EFF;
                    }
                }

                .hotList:nth-child(1) .user>span,
                .hotList:nth-child(2) .user>span,
                .hotList:nth-child(3) .user>span {
                    background-color: #409EFF;
                }
            }
        }
    }
</style>